<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
				html{
					font-size: 10px;
				}
			/*当屏幕大于300px的时候*/
			@media only screen and (min-width:500px){
				html{
					font-size: 15px;
				}
			}
			/*当屏幕大于500px的时候*/
			@media only screen and (min-width:800px){
				html{
					font-size: 20px;
				}
			}
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			#main{
				width:100%;
				height:69rem;
				/*border: 1px solid red;*/
				box-sizing: border-box;
				
				/*display: flex;*/
				/*flex-basis: 100%;*/
			}
			#head{
				width: 100%;
				height: 4.8rem;
				background:deepskyblue;
				display: flex;
				flex-basis: 100%;
				box-sizing: border-box;
				justify-content: center;
				align-items: center;
			}
			#head li{flex: 1;}
			#head li{
				line-height: 4.8rem;
				color: white;
				text-align: center;
				font-size: 1.4rem;
				box-sizing: border-box;
				
			}
			#banner{
				width: 100%;
				height: 20rem;
				font-size: 3rem;
				border-top: 4px solid white;
				box-sizing: border-box;
				justify-content: center;
				align-items: center;
				display: flex;
				background: greenyellow;
			}
			#list{
				margin-top: 2px;
				width: 100%;
				height: 20rem;
				/*padding: 5px;*/
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				/*flex-basis: 100%;*/
				flex-wrap: wrap;
				
			}
			#list li{flex:1;}
			#list li{
				font-size: 1.4rem;
				/*width: 30%;*/
				flex-basis: 30%;
				height: 10rem;
				padding: 5px;
				text-align: center;
				line-height:10rem;
				color: white;
				background: black;
				box-sizing: border-box;
				border: 2px solid white;
				/*border-top: 4px solid white;
				border-bottom: 4px solid white;*/
				
			}

			#title{
				width: 100%;
				height: 3.6rem;
				/*padding: 5px;*/
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				flex-basis: 100%;
				
			}
			#title li{flex:1;}
			
			#title li{
				font-size: 1.4rem;
				height: 3rem;
				text-align: center;
				line-height:3rem;
				color: #333333;
				background: greenyellow;
				box-sizing: border-box;
			}
			#lis{
				width: 100%;
				height: 15rem;
				/*padding: 5px;*/
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				flex-basis: 100%;
				
			}
			#lis li{flex:1;}
			#lis li{
				font-size: 1.8rem;
				height: 15rem;
				/*padding: 5px;*/
				text-align: center;
				line-height:15rem;
				color: white;
				background: black;
				box-sizing: border-box;
				border: 2px solid white;
				border-top: 0px solid white;
				border-bottom: 2px solid white;
				
			}
			#lis li:nth-child(1){
				flex-grow: 1;
			}
			#lis li:nth-child(2){
				flex-grow: 2;
			}
			#lis li:nth-child(3){
				flex-grow: 1;
			}
			#foot{
				width: 100%;
				height: 4.8rem;
				background:deepskyblue;
				display: flex;
				box-sizing: border-box;
				justify-content: center;
				align-items: center;
				flex-basis: 100%;
				
			}
			#foot li{flex: 1;}
			#foot li{
				height: 3.6rem;
				line-height: 3.6rem;
				color: white;
				text-align: center;
				font-size: 1.4rem;
				box-sizing: border-box;
				
			}
		</style>
	</head>
	<body>
		<div id="main">
			<header>
				<nav>
					<ul id="head">
						<li>首页</li>
						<li>课程</li>
						<li>项目</li>
						<li>PHP</li>
						<li>联系我们</li>
					</ul>
				</nav>
			</header>
			<article>
				<section>
					<ul id="banner">
						banner
					</ul>
				</section>
				<section>
					<ul id="list">
						<li>banner</li>
						<li>banner</li>
						<li>banner</li>
						<li>banner</li>
						<li>banner</li>
						<li>banner</li>
						
					</ul>
				</section>

				<section>
					<ul id="title">
						<li>title</li> 
					</ul>
				</section>
				<section>
					<ul id="lis">
						<li>banner</li>
						<li>banner</li>
						<li>banner</li>
						
					</ul>
				</section>
				
			</article>
			<footer>
				<ul id="foot">
					<li>后盾</li>
					<li>后盾</li>
					<li>后盾</li>
					<li>后盾</li>
				</ul>
			</footer>
		</div>
	</body>
</html>
